<!DOCTYPE html>
<html class="x-admin-sm">
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<html>
<head>
    <meta charset="UTF-8">
    <title>在线客服</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet" href="../css/font.css">
    <link rel="stylesheet" href="../css/xadmin.css">
    <script src="../lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="../js/xadmin.js"></script>
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
    <script src="http://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script>
    <script src="https://cdn.bootcss.com/sockjs-client/1.1.4/sockjs.min.js"></script>
</head>


<body>
<div class="x-nav">
            <span class="layui-breadcrumb">
                <a href="">联系客服</a>
                <a><cite>在线客服</cite></a>
            </span>
</div>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">

                <div class="layui-card-body ">
                    <fieldset class="layui-elem-field">
                        <legend>欢迎连线客服</legend>
                        <br>

                                <legend>
                                    会话对象
                                    <select id="onLineUser" >
                                        <option >every one</option>
                                    </select>
                                </legend>
                        <br>
<!--                        -->
<!--                    </fieldset>-->
<!--                </div>-->



<!--                <div class="layui-card-body ">-->
<!--                    <fieldset class="layui-elem-field">-->
<!--                        <legend>聊天对话框</legend>-->
<!--                            <br>-->

                        <hr class="layui-bg">
                        <br>
                            <input  type="text" th:value="${username}" id="username" style="display: none" />

                            <legend>
                                <div id="message" style="text-align: left;"></div>
                            </legend>


                        <br>

                        <script type="text/javascript">
                            var webSocket;
                            var commWebSocket;
                            if ("WebSocket" in window)
                            {
                                webSocket = new WebSocket("ws://localhost:8079/websocket/"+document.getElementById('username').value);

                                //连通之后的回调事件
                                webSocket.onopen = function()
                                {
                                    //webSocket.send( document.getElementById('username').value+"已经上线了");
                                    console.log("已经连通了websocket");
                                    setMessageInnerHTML("会话已联通");
                                };

                                //接收后台服务端的消息
                                webSocket.onmessage = function (evt)
                                {
                                    var received_msg = evt.data;
                                    console.log("数据已接收:" +received_msg);
                                    var obj = JSON.parse(received_msg);
                                    console.log("可以解析成json:"+obj.messageType);
                                    //1代表上线 2代表下线 3代表在线名单 4代表普通消息
                                    if(obj.messageType==1){
                                        //把名称放入到selection当中供选择
                                        var onlineName = obj.username;
                                        var option = "<option>"+onlineName+"</option>";
                                        $("#onLineUser").append(option);
                                        setMessageInnerHTML(onlineName+"上线了");
                                    }
                                    else if(obj.messageType==2){
                                        $("#onLineUser").empty();
                                        var onlineName = obj.onlineUsers;
                                        var offlineName = obj.username;
                                        var option = "<option>"+"--所有--"+"</option>";
                                        for(var i=0;i<onlineName.length;i++){
                                            if(!(onlineName[i]==document.getElementById('username').value)){
                                                option+="<option>"+onlineName[i]+"</option>"
                                            }
                                        }
                                        $("#onLineUser").append(option);

                                        setMessageInnerHTML(offlineName+"下线了");
                                    }
                                    else if(obj.messageType==3){
                                        var onlineName = obj.onlineUsers;
                                        var option = null;
                                        for(var i=0;i<onlineName.length;i++){
                                            if(!(onlineName[i]==document.getElementById('username').value)){
                                                option+="<option>"+onlineName[i]+"</option>"
                                            }
                                        }
                                        $("#onLineUser").append(option);
                                        console.log("获取了在线的名单"+onlineName.toString());
                                    }
                                    else{
                                        setMessageInnerHTML(obj.fromusername+"对"+obj.tousername+"说："+obj.textMessage);
                                    }
                                };

                                //连接关闭的回调事件
                                webSocket.onclose = function()
                                {
                                    console.log("连接已关闭...");
                                    setMessageInnerHTML("连接已关闭....");
                                };
                            }
                            else{
                                // 浏览器不支持 WebSocket
                                alert("您的浏览器不支持 WebSocket!");
                            }
                            //将消息显示在网页上
                            function setMessageInnerHTML(innerHTML) {
                                document.getElementById('message').innerHTML += innerHTML + '<br/>';
                            }

                            function closeWebSocket() {
                                //直接关闭websocket的连接
                                webSocket.close();
                            }

                            function send() {
                                var selectText = $("#onLineUser").find("option:selected").text();
                                if(selectText=="--所有--"){
                                    selectText = "All";
                                }
                                else{
                                    setMessageInnerHTML(document.getElementById('username').value+"对"+selectText+"说："+ $("#text").val());
                                }
                                var message = {
                                    "message":document.getElementById('text').value,
                                    "username":document.getElementById('username').value,
                                    "to":selectText
                                };
                                webSocket.send(JSON.stringify(message));
                                $("#text").val("");

                            }
                        </script>


                    </fieldset>
                </div>


                <div class="layui-card-body ">
                    <fieldset class="layui-elem-field">
                        <legend>输入框</legend>
                        <br>



<!--                        <input id="text" type="text" class="layui-input"/>-->
<!--                        <label ><button class="layui-btn layui-btn-danger" onclick="send()">发送消息</button></label>-->



                        <div>
                            <div>
                                <legend>
                                    <input id="text" type="text" lay-verify="required|phone" autocomplete="off" class="layui-input"/>
                                </legend>
                            </div>
                            <div>
                                <legend>
                                    <br>
                                    <button class="layui-btn layui-btn-danger" onclick="send()">发送消息</button>
                                    <button class="layui-btn layui-btn-danger" onclick="send()">消息重置</button>
                                    <button onclick="closeWebSocket()" class="layui-btn layui-btn-warm">关闭连接</button>
                                    <br>
                                </legend>
                                <legend>
                                    <br>
                                </legend>
                            </div>
                        </div>



<!--                        <div class="layui-inline">-->
<!--                            <label class="layui-form-label">验证手机</label>-->
<!--                            <div class="layui-input-inline">-->
<!--                                <input type="tel" name="phone" lay-verify="required|phone" autocomplete="off" class="layui-input">-->
<!--                            </div>-->
<!--                        </div>-->



                        <!--                        <button onclick="closeWebSocket()">关闭连接</button>-->


<!--                        <div class="layui-form-item">-->
<!--                            <label class="layui-form-label">单行输入框</label>-->
<!--                            <div class="layui-input-block">-->
<!--                                <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">-->
<!--                            </div>-->



                    </fieldset>
                </div>
















            </div>
        </div>
    </div>
</div>






</body>





</html>